// 商业投保方案
<template>

<div class="sy-plan">

    <Tabs :value="current">
        
        <TabPane  :label="'投保方案'" :name="'syPlan'">
            <l-car-sy-plan-form :disabled='true' :data = 'planData'></l-car-sy-plan-form>
        </TabPane>
        <TabPane  :label="'计费结果'" :name="'charging'">
            
            <!-- 固定容器大小，防止内容溢出 -->
            <div class="charging-content">
                <l-car-charging-detailed :hasKeys='chargingData.hasKeys' :chargingData='chargingData.data'></l-car-charging-detailed>
            </div>
        </TabPane>
        
    </Tabs>
    
</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import * as syConf from '@/components/ivew_conf/car_sy_plan'
import carSyPlanForm from '@/components/ivew_components/car_sy_plan/index.vue'
import carChargingDetailed from '@/components/ivew_components/car_charging/car_charging_detailed/index.vue'

 
@Component({
    components: {
        'l-car-sy-plan-form': carSyPlanForm,
         'l-car-charging-detailed': carChargingDetailed
    }
})
export default class syPlan extends Vue{
    name:string = 'sy-plan'

    current:string = 'syPlan'

    syConf = syConf
    syDetailsClass:string = '自定义'             //商险表单状态
    syDetailsPreConf = syConf.preConfList()     //预设列表
    
    @Prop()
    planData

    @Prop()
    chargingData
    
    conf = [

        {
            label: '计费结果',
            key: 'charging',
            component: carSyPlanForm,
            
        },
        {
            label: '投保方案',
            key: 'syPlan',
            component: ''
        }
        
    ]

}


</script>

<style scoped lang='scss'>

.charging-content{
    overflow: scroll;
    padding:_rem(6px);
}

</style>